import React, { useEffect, useState } from 'react'
import { Menu, MenuProps, MenuTheme } from 'antd'
import { useTheme } from 'next-themes'
import NextIcon from '../NextIcon'
import { usePathname, useRouter } from 'next/navigation'
export type MenuItem = Required<MenuProps>['items'][number]

export const items: MenuItem[] = [
  {
    key: '/dashboard',
    icon: <NextIcon type="dashboard" size={16} />,
    label: 'Dashboard'
  },
  {
    key: '2',
    icon: <NextIcon type="menu" size={16} />,
    label: '菜单管理'
  },
  {
    key: '/user',
    label: '用户管理',
    icon: <NextIcon type="user" size={16} />,
    children: [
      { key: '/user/manager', label: '用户列表' },
      { key: '4', label: '访问记录' },
      {
        key: 'sub1-2',
        label: 'Submenu',
        children: [
          { key: '5', label: 'Option 5' },
          { key: '6', label: 'Option 6' }
        ]
      }
    ]
  },
  {
    key: 'sub2',
    label: '文章管理',
    icon: <NextIcon type="setting" size={16} />,
    children: [
      { key: '7', label: '文章分类' },
      { key: '8', label: '文章标签' },
      { key: '9', label: '文章' },
      { key: '10', label: '访问记录' }
    ]
  },
  {
    key: '/components',
    icon: <NextIcon type="components" size={16} />,
    label: '组件'
  },
  {
    key: 'link',
    icon: <NextIcon type="link" size={16} />,
    label: (
      <a
        href="https://next.batype.com"
        target="_blank"
        rel="noopener noreferrer"
      >
        Next Batype
      </a>
    )
  }
]

export default function BasicMenu({ collapsed }: { collapsed: boolean }) {
  const { theme } = useTheme()
  const pathname = usePathname()
  const { push } = useRouter()
  const [te, changeTe] = useState<MenuTheme>('light')
  const onClick: MenuProps['onClick'] = e => {
    console.log('click ', e.keyPath)
    const keyPath = e.keyPath
    push(keyPath[0])
  }

  useEffect(() => {
    changeTe(theme as MenuTheme)
  }, [theme])

  return (
    <Menu
      theme={te}
      selectedKeys={[pathname]}
      onClick={onClick}
      style={{ border: 0 }}
      inlineCollapsed={collapsed}
      mode="inline"
      items={items}
    />
  )
}
